<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px">
        <el-form ref="queryForm" :model="form" label-width="100px" inline size="mini">
            <el-form-item label="供应商名称">
                <el-input v-model="form.keyword" placeholder="请输入供应商名称" style="width: 240px" clearable></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData" border script max-height="500px">
            <el-table-column label="供应商名称" prop="left.supply_name" min-width="260"> </el-table-column>
            <el-table-column label="操作" min-width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="changeSupply(scope.row.left)">选择</el-button>
                </template>
            </el-table-column>
            <el-table-column label="供应商名称" prop="right.supply_name" min-width="260"> </el-table-column>
            <el-table-column label="操作" min-width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="changeSupply(scope.row.right)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList" />
        <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
</template>

<script>
import { getSupplyList } from '@/api/supply'
import { changeSupply } from '@/api/purchase'
export default {
    name: 'spuListDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            form: {
                keyword: '',
            },
            // 分页信息
            pageInfo: {
                page: 1,
                limit: 10,
            },
            skuEditDialog: {
                visible: false,
                data: {},
            },
        }
    },
    computed: {
        title() {
            return `更换供应商`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.getList()
                }
            },
            immediate: true,
            deep: true,
        },
    },
    created() {},
    methods: {
        changeSupply(row) {
            changeSupply({
                id: this.params.id,
                supply_id: row.id,
            }).then(() => {
                this.$message.success('修改成功')
                this.dialogVisible = false
                this.$emit('success')
            })
        },
        // 搜索按钮操作
        handleQuery() {
            this.pageInfo.page = 1
            this.getList()
        },

        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        getList() {
            this.loading = true
            getSupplyList({ ...this.form, ...this.pageInfo })
                .then(res => {
                    res.data.map((item, index) => {
                        if (index % 2 === 0) {
                            this.tableData.push({
                                index: index,
                                left: item,
                                right: {},
                            })
                        } else {
                            this.tableData[this.tableData.length - 1].right = item
                        }
                    })

                    this.total = res.data?.total ?? 0
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style></style>
